<html>
<head>
    <title>CISiP-FIRe</title>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script src="./{{ url_for('static', filename='script.js')}}"></script>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet"
          integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js"
            integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4"
            crossorigin="anonymous"></script>
    <link rel="preconnect" href="https://fonts.gstatic.com"/>
    <link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet"/>
    <link rel="stylesheet" type="text/css" href="./{{ url_for('static', filename='style.css')}}"/>
</head>
<body>
<div class="head">
    Image Retrieval - CISiP-FIRe
</div>
<!--<p class="desc">Find the closest images in database of 130k images.</p>-->
<div class="container d-flex justify-content-center">
    <form action="" method="POST" enctype="multipart/form-data">
        <div class="input-group mb-3 px-2 py-2 rounded-pill bg-white shadow-sm">
            <input id="upload" type="file" name="file" class="form-control border-0" required>
            <label id="upload-label" for="upload" class="font-weight-light text-muted">Choose or drag image</label>
            <div class="input-group-append">
                <button type="submit" for="upload" class="btn btn-light m-0 rounded-pill px-4">
                    <i class="fa fa-cloud-upload mr-2 text-muted"></i>
                    <small class="text-uppercase font-weight-bold text-muted">Upload file</small></button>
            </div>
        </div>
    </form>
</div>

{% with messages = get_flashed_messages() %}
{% if messages %}

{% if "successfully" in messages[0] %}
{% else %}
<p>
<div class="alert alert-warning" role="alert">{{ messages[0] }}</div>
</p>
{% endif %}
{% endif %}
{% endwith %}
{% if query_img %}
<div class="container overflow-hidden">
    <div class="row">
        <div class="col-sm-3 my-auto">
            <img src="data:image/jpeg;base64,{{ query_img }}" style="width: 10rem;" class="img-fluid ">
        </div>

        <div class="col-sm-9 justify-content-around row row-cols-auto g-4">
            {% for path in paths %}
            <!--             mx-auto-->
            <div class="col">
                <!--                <br>-->
                <div class="card text-center" style="width: 10rem;">
                    <img src="{{ url_for('get_image', filename=path) }}" style="height: 10rem;"
                         class="card-img-top smalling" alt="...">
                    <div class="card-body">
                        <p class="card-text">Distance: {{ dists[loop.index0] }}</p>
                    </div>
                </div>
            </div>
            {% endfor %}
        </div>
    </div>
    <!--col-sm-->
    <div class="row mt-4">
        <div class="accordion" id="accordionCode">
            <div class="accordion-item">
                <h2 class="accordion-header" id="headingOne">
                    <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                            data-bs-target="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
                        Binary Code Representation
                    </button>
                </h2>
                <div id="collapseOne" class="accordion-collapse collapse" aria-labelledby="headingOne"
                     data-bs-parent="#accordionCode">
                    <div class="accordion-body">
                        <p class="">{{code}}</p>
                    </div>
                </div>
            </div>
            <div class="accordion-item">
                <h2 class="accordion-header" id="headingTwo">
                    <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                            data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                        Extra Information
                    </button>
                </h2>
                <div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo"
                     data-bs-parent="#accordionCode">
                    <div class="accordion-body">
                        <p class="">{{extra_data}}</p>
                    </div>
                </div>
            </div>
        </div>
        <p class="desc">{{time_string}}</p>
    </div>
</div>
<br>
{% endif %}
<div class="container">


</div>

</body>
<!-- Footer -->
<footer class="page-footer font-small blue pt-4">
    <!-- Copyright -->
    <div class="footer-copyright text-center p-4 footer-text" style="background-color: rgba(255, 255, 255, 0.10);">© 2021
        Copyright CISiP Lab
        <a class="text-reset fw-bold" href="https://github.com/CISiPLab/cisip-FIRe"> Github: CISiP-FIRe</a>
    </div>
    <!-- Copyright -->
</footer>
<!-- Footer -->
</html>
